<template>
  <!-- header -->
  <div class = "nav-container page-component">
    <!--左侧导航 #start -->
    <div class = "nav left-nav">
      <div class = "nav-item ">
        <span class = "v-link clickable dark" onclick = "javascript:window.location='/user'">实名认证 </span>
      </div>
      <div class = "nav-item ">
        <span class = "v-link clickable dark" onclick = "javascript:window.location='/order'"> 挂号订单 </span>
      </div>
      <div class = "nav-item selected">
        <span class = "v-link selected dark" onclick = "javascript:window.location='/patient'"> 就诊人管理 </span>
      </div>
      <div class = "nav-item ">
        <span class = "v-link clickable dark"> 修改账号信息 </span>
      </div>
      <div class = "nav-item ">
        <span class = "v-link clickable dark"> 意见反馈 </span>
      </div>
    </div>
    <!-- 左侧导航 #end -->
    <!-- 右侧内容 #start -->
    <div class = "page-container">
      <div class = "personal-patient">
        <div class = "header-wrapper">
          <div class = "title"> 添加就诊人</div>
        </div>
        <div>
          <div class = "sub-title">
            <div class = "block"></div>
            就诊人信息
          </div>
          <div class = "content-wrapper">
            <el-form :model = "patient" label-width = "110px" label-position = "left" ref = "patient"
                     :rules = "validateRules">
              <el-form-item prop = "name" label = "姓名：">
                <el-input v-model = "patient.name" placeholder = "请输入真实姓名全称" class = "input v-input"/>
              </el-form-item>
              <el-form-item prop = "certificatesType" label = "证件类型：">
                <el-select v-model = "patient.certificatesType" placeholder = "请选择证件类型"
                           class = "v-select patient-select">
                  <el-option
                    v-for = "item in certificatesTypeList"
                    :key = "item.value"
                    :label = "item.name"
                    :value = "item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop = "certificatesNo" label = "证件号码：">
                <el-input v-model = "patient.certificatesNo" placeholder = "请输入证件号码" class = "input v-input"/>
              </el-form-item>
              <el-form-item prop = "sex" label = "性别：">
                <el-radio-group v-model = "patient.sex">
                  <el-radio :label = "1">男</el-radio>
                  <el-radio :label = "0">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop = "birthdate" label = "出生日期：">
                <el-date-picker
                  v-model = "patient.birthdate"
                  class = "v-date-picker"
                  type = "date"
                  placeholder = "选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item prop = "phone" label = "手机号码：">
                <el-input v-model = "patient.phone" placeholder = "请输入手机号码" maxlength = "11"
                          class = "input v-input"/>
              </el-form-item>
            </el-form>
          </div>
          <div class = "sub-title">
            <div class = "block"></div>
            建档信息（完善后部分医院首次就诊不排队建档）
          </div>
          <div class = "content-wrapper">
            <el-form :model = "patient" label-width = "110px" label-position = "left" ref = "patient"
                     :rules = "validateRules">
              <el-form-item prop = "isMarry" label = "婚姻状况：">
                <el-radio-group v-model = "patient.isMarry">
                  <el-radio :label = "0">未婚</el-radio>
                  <el-radio :label = "1">已婚</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop = "isInsure" label = "自费/医保：">
                <el-radio-group v-model = "patient.isInsure">
                  <el-radio :label = "0">自费</el-radio>
                  <el-radio :label = "1">医保</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop = "addressSelected" label = "当前住址：">
                <el-cascader
                  ref = "selectedShow"
                  v-model = "patient.addressSelected"
                  class = "v-address"
                  :props = "props"></el-cascader>
              </el-form-item>
              <el-form-item prop = "address" label = "详细地址：">
                <el-input v-model = "patient.address" placeholder = "应公安机关要求，请填写现真实住址"
                          class = "input v-input"/>
              </el-form-item>
            </el-form>
          </div>
          <div class = "sub-title">
            <div class = "block"></div>
            联系人信息（选填）
          </div>
          <div class = "content-wrapper">
            <el-form :model = "patient" label-width = "110px" label-position = "left">
              <el-form-item prop = "contactsName" label = "姓名：">
                <el-input v-model = "patient.contactsName" placeholder = "请输入联系人姓名全称"
                          class = "input v-input"/>
              </el-form-item>
              <el-form-item prop = "contactsCertificatesType" label = "证件类型：">
                <el-select v-model = "patient.contactsCertificatesType" placeholder = "请选择证件类型"
                           class = "v-select patient-select">
                  <el-option
                    v-for = "item in certificatesTypeList"
                    :key = "item.value"
                    :label = "item.name"
                    :value = "item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop = "contactsCertificatesNo" label = "证件号码：">
                <el-input v-model = "patient.contactsCertificatesNo" placeholder = "请输入联系人证件号码"
                          class = "input v-input"/>
              </el-form-item>
              <el-form-item prop = "contactsPhone" label = "手机号码：">
                <el-input v-model = "patient.contactsPhone" placeholder = "请输入联系人手机号码"
                          class = "input v-input"/>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class = "bottom-wrapper">
          <div class = "button-wrapper">
            <div class = "v-button" @click = "saveOrUpdate()">{{ submitBnt }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧内容 #end -->
  </div>
  <!-- footer -->
</template>
<script>
import '~/assets/css/hospital_personal.css'
import '~/assets/css/hospital.css'
import '~/assets/css/personal.css'
import dictApi from '@/api/cmn/dict'
import patientApi from '@/api/user/patient'

const defaultForm = {
  name: '',
  certificatesType: '',
  certificatesNo: '',
  sex: 1,
  birthdate: '',
  phone: '',
  isMarry: 0,
  isInsure: 0,
  provinceCode: '',
  cityCode: '',
  districtCode: '',
  addressSelected: null,
  address: '',
  contactsName: '',
  contactsCertificatesType: '',
  contactsCertificatesNo: '',
  contactsPhone: '',
  param: {}
}
export default {
  data () {
    return {
      patient: defaultForm,
      certificatesTypeList: [],
      props: {
        lazy: true,
        async lazyLoad (node, resolve) {
          const {level} = node
          //异步获取省市区
          dictApi.findByParentId(level ? node.value : '86').then(response => {
            let list = response.data
            let provinceList = list.map((item, i) => {
              return {
                value: item.id,
                label: item.name,
                leaf: node.level == 2 ? true : false,//可控制显示几级
              }
            })
            resolve && resolve(provinceList)
          })
        }
      },
      submitBnt: '保存',
      validateRules: {
        name: [{required: true, trigger: 'blur', message: '必须输入'}],
        certificatesType: [{required: true, trigger: 'blur', message: '必须输入'}],
        certificatesNo: [{required: true, trigger: 'blur', message: '必须输入'}],
        birthdate: [{required: true, trigger: 'blur', message: '必须输入'}],
        phone: [{required: true, trigger: 'blur', message: '必须输入'}],
        addressSelected: [{required: true, trigger: 'blur', message: '必须输入'}],
        address: [{required: true, trigger: 'blur', message: '必须输入'}]
      }
    }
  },
  created () {
    this.init();
  },
  mounted () {
    if (this.$route.query.id) {
      setTimeout(() => {
        this.$refs.selectedShow.presentText = this.patient.param.provinceString + '/' + this.patient.param.cityString + '/' + this.patient.param.districtString //"北京市/市辖区/西城区";// 首次手动复制
        // this.$refs.selectedShow.value = '110000/110100/110102';
      }, 1000)
    }
  },
  methods: {
    init () {
      if (this.$route.query.id) {
        const id = this.$route.query.id
        this.fetchDataById(id)
      } else {
        // 对象拓展运算符：拷贝对象，而不是赋值对象的引用
        this.patient = {...defaultForm}
      }
      this.getDict()
    },

    fetchDataById (id) {
      patientApi.getById(id).then(response => {
        this.patient = response.data
        //添加默认值
        this.patient.addressSelected = [this.patient.provinceCode, this.patient.cityCode, this.patient.districtCode]
      })
    },
    getDict () {
      dictApi.findByDictCode("CertificatesType").then(response => {
        this.certificatesTypeList = response.data
      })
    },

    saveOrUpdate () {
      this.$refs.patient.validate(valid => {
        if (valid) {
          //地址处理
          if (this.patient.addressSelected.length == 3) {
            this.patient.provinceCode = this.patient.addressSelected[0]
            this.patient.cityCode = this.patient.addressSelected[1]
            this.patient.districtCode = this.patient.addressSelected[2]
          }
          if (!this.patient.id) {
            this.saveData()
          } else {
            this.updateData()
          }
        }
      })
    },
    // 新增
    saveData () {
      if (this.submitBnt == '正在提交...') {
        this.$message.info('重复提交')
        return
      }
      this.submitBnt = '正在提交...'
      patientApi.save(this.patient).then(response => {
        this.$message.success("提交成功")
        window.location.href = '/patient'
      }).catch(e => {
        this.submitBnt = '保存'
      })
    },
    // 根据id更新记录
    updateData () {
      if (this.submitBnt == '正在提交...') {
        this.$message.info('重复提交')
        return
      }
      this.submitBnt = '正在提交...'
      patientApi.updateById(this.patient).then(response => {
        this.$message.success("提交成功")
        window.location.href = '/patient'
      }).catch(e => {
        this.submitBnt = '保存'
      })
    }
  }
}
</script>
<style>
.header-wrapper .title {
  font-size: 16px;
  margin-top: 0;
}

.sub-title {
  margin-top: 0;
}

.bottom-wrapper {
  padding: 0;
  margin: 0;
}

.bottom-wrapper .button-wrapper {
  margin-top: 0;
}
</style>
